
<ion-navbar *navbar hideBackButton>
  <ion-title>Icon Buttons</ion-title>
</ion-navbar>

<ion-content padding class="has-header components-demo">

  <p>
    <button light>
      <ion-icon name='arrow-back'></ion-icon>
      Back
    </button>

    <button light>
      <ion-icon name='arrow-down'></ion-icon>
    </button>

    <button light>
      <ion-icon name='arrow-up'></ion-icon>
    </button>

    <button light>
      Next
      <ion-icon name='arrow-forward'></ion-icon>
    </button>
  </p>

  <p>
    <button>
      <ion-icon name='home'></ion-icon>
      Home
    </button>
    <button outline >
      <ion-icon name='briefcase' is-active="false"></ion-icon>
      Work
    </button>
    <button clear>
      <ion-icon name='beer' is-active="false"></ion-icon>
      Pub
    </button>
  </p>

  <p>
    <button secondary>
      <ion-icon name='people'></ion-icon>
      Friends
    </button>
    <button secondary outline>
      <ion-icon name='paw' is-active="false"></ion-icon>
      Best Friend
    </button>
  </p>

  <p>
    <button danger>
      <ion-icon name='close'></ion-icon>
      Remove
    </button>
    <button danger outline>
      <ion-icon name='remove-circle' is-active="false"></ion-icon>
    </button>
    <button danger clear>
      <ion-icon name='trash' is-active="false"></ion-icon>
    </button>
  </p>

  <p>
    <button dark round>
      <ion-icon name='construct' is-active="false"></ion-icon>
      Tools
    </button>
    <button dark clear>
      <ion-icon name='hammer' is-active="false"></ion-icon>
    </button>
  </p>

</ion-content>
